<template>
  <div class="tutorials-container">
    <div class="page-header">
      <h1>教程管理</h1>
      <el-button type="primary" @click="createTutorial">添加教程</el-button>
    </div>
    
    <el-table :data="tutorials" style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="title" label="标题" width="250" />
      <el-table-column prop="author" label="作者" width="120" />
      <el-table-column prop="category" label="分类" width="120">
        <template #default="scope">
          <el-tag>{{ scope.row.category }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column prop="viewCount" label="查看次数" width="100" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="100"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const loading = ref(false);

// Mock tutorial data
const tutorials = ref([
  {
    id: 1,
    title: '粤语拼音基础入门',
    author: '张老师',
    category: '基础教程',
    createTime: '2023-05-20 12:30:45',
    viewCount: 1250
  },
  {
    id: 2,
    title: '粤语歌词创作技巧',
    author: '李老师',
    category: '创作指南',
    createTime: '2023-05-21 10:15:22',
    viewCount: 980
  },
  {
    id: 3,
    title: '粤语发音技巧与练习',
    author: '王老师',
    category: '发音教程',
    createTime: '2023-05-22 09:05:11',
    viewCount: 1560
  },
  {
    id: 4,
    title: '粤语歌曲演唱技巧',
    author: '赵老师',
    category: '演唱技巧',
    createTime: '2023-05-23 14:22:33',
    viewCount: 2100
  }
]);

const createTutorial = () => {
  ElMessage.info('跳转到创建教程页面');
};

const handleEdit = (row) => {
  ElMessage.info(`编辑教程: ${row.title}`);
};

const handleView = (row) => {
  ElMessage.info(`查看教程: ${row.title}`);
};

const handleDelete = (row) => {
  ElMessageBox.confirm(`确认删除教程 "${row.title}"?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    tutorials.value = tutorials.value.filter(item => item.id !== row.id);
    ElMessage.success('删除成功');
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};

const handlePageChange = (page) => {
  console.log('Current page:', page);
  // Here would be API call to fetch data for the selected page
};
</script>

<style scoped>
.tutorials-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style> 